<template>
	<view class="page">
		<view class="formItem">
			<view class="title">
				支付宝信息
			</view>
			<view class="form">
				<u-form :model="aliForm" ref="aliForm" >
						<u-form-item :border-bottom="false" prop="account">
							<view class="inputRow">
								<u-input   placeholder="请输入支付宝账号" v-model="aliForm.account" />
							</view>
						</u-form-item>
						<u-form-item  :border-bottom="false"  prop="name">
							<view class="inputRow">
								<u-input  placeholder="请输入真实姓名"  v-model="aliForm.name" />
							</view>
						</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="formItem">
			<view class="title">
				银行卡信息
			</view>
			<view class="form">
				<u-form :model="bankForm" ref="bankForm" >
						<u-form-item :border-bottom="false" prop="account">
							<view class="inputRow">
								<u-input   placeholder="请输入银行账号" v-model="bankForm.account" />
							</view>
						</u-form-item>
						<u-form-item :border-bottom="false" prop="bank">
							<view class="inputRow">
								<u-input   placeholder="请输入开户行" v-model="bankForm.bank" />
							</view>
						</u-form-item>
						<u-form-item  :border-bottom="false"  prop="name">
							<view class="inputRow">
								<u-input  placeholder="请输入真实姓名"  v-model="bankForm.name" />
							</view>
						</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="btn" @click="submit">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aliForm:{
					account:'',
					name: '',
				},
				bankForm:{
					account:'',
					bank:'',
					name: '',
				},
				aliFormRules: {
					account: [
						{ 
							required: true, 
							message: '请输入支付宝账号', 
							trigger: ['change','blur'],
							// validator: (rule, value, callback) => {
							// 	return this.$u.test.mobile(value);
							// },
						}
					],
					name: [
						{
							required: true,
							message: '请输入真实姓名', 
							trigger: ['change','blur'],
						}
					]
				},
				bankFormRules: {
					account: [
						{ 
							required: true, 
							message: '请输入银行账号', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
							// validator: (rule, value, callback) => {
							// 	return this.$u.test.mobile(value);
							// },
						}
					],
					bank: [
						{
							required: true,
							message: '请输入开户行', 
							trigger: ['change','blur'],
						}
					],
					name: [
						{
							required: true,
							message: '请输入真实姓名', 
							trigger: ['change','blur'],
						}
					],
				},
				
			};
		},
		methods:{
			submit(){
				this.$refs.aliForm.validate(valid => {
					if (valid) {
						this.$refs.bankForm.validate(valid => {
							if (valid) {
								
							} else {
								console.log('bank验证失败');
							}
						});
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {
				this.$refs.aliForm.setRules(this.aliFormRules);
				this.$refs.bankForm.setRules(this.bankFormRules);
		},
		components:{
			
		},
		filters:{
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	@include flexCol;
	align-items: center;
	font-family: PingFang SC;
	.formItem{
		margin-top: 40rpx;
		.title{
			font-size: 30rpx;
			font-weight: 600;
		}
		.form{
			width: 650rpx;
			.inputRow{
				display: flex;
				align-items: center;
				height: 88rpx;
				width: 650rpx;
				background: #F6F6F6;
				border-radius: 20rpx;
				padding: 0 20rpx;
			}
		}
	}
	.btn{
		position: fixed;
		bottom: 5%;
		@include flexCenter;
		width: 700rpx;
		height: 98rpx;
		background: #FE5E10;
		border-radius: 20rpx;
		color: #fff;
		// align-self: flex-end;
		// justify-content: flex-end;
	}
}
</style>
